import React from 'react'
import { Divider, Tooltip, Popover, Image } from 'antd'
import { WechatOutlined, WeiboCircleOutlined, QqOutlined, GithubOutlined, AlipayCircleOutlined, createFromIconfontCN } from '@ant-design/icons'
import WechatQrCode from '@/assets/images/wechat.jpg'


const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2764026_410nf7yuag.js',
});

const renderCard = (type) => {
  return (
    <div>
      <Image width={264} height={347.25} src={type} alt={'微信号：Johnnie_Wind'} />
    </div>
  )
}

function SocialAccount() {
  return (
    <div style={{ marginTop: 10, paddingBottom: 1, backgroundColor: 'white', borderRadius: '.2rem', padding: 12, boxShadow: '0 1px 3px rgb(18 18 18 / 10%)' }}>
      <Divider >社交账号</Divider>
      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}>

        <Tooltip title="Gitee：johnniewind">
          <a href='https://gitee.com/johnniewind' target='_blank' rel="noreferrer" >
            <IconFont type="icon-gitee2" style={{ fontSize: 28, color: '#666666' }} />
          </a>
        </Tooltip>

        <Tooltip title="Github：wuzhengyu571">
          <a href='https://github.com/wuzhengyu571' target='_blank' rel="noreferrer" >
            <GithubOutlined style={{ fontSize: 28, color: '#666666' }} />
          </a>
        </Tooltip>

        <Tooltip title="微博：借力好风-">
          <a href='https://weibo.com/u/3210745354' target='_blank' rel="noreferrer" >
            <WeiboCircleOutlined style={{ fontSize: 28, color: '#666666' }} />
          </a>
        </Tooltip>

        <Tooltip title="微信号：Johnnie_Wind">
          <Popover placement="top" title={'微信号：Johnnie_Wind'} content={renderCard(WechatQrCode)} trigger="click">
            <WechatOutlined style={{ fontSize: 28, color: '#666666' }} />
          </Popover>
        </Tooltip>

        <Tooltip title="QQ：949394048">
          <Popover placement="top" title={'QQ：949394048'} content={renderCard(WechatQrCode)} trigger="click">
            {/* <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes" rel="noreferrer"> */}
            <QqOutlined style={{ fontSize: 28, color: '#666666' }} />
            {/* </a> */}
          </Popover>
        </Tooltip>

        <Tooltip title="支付宝-请我喝咖啡">
          <Popover placement="top" title={'支付宝-请我喝咖啡'} content={renderCard(WechatQrCode)} trigger="click">
            <AlipayCircleOutlined style={{ fontSize: 28, color: '#666666' }} />
          </Popover>
        </Tooltip>
      </div>
    </div >
  )
}

export default SocialAccount
